<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mycss {
  background: red;
}

</style>
<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <FormItem label="工厂" prop="factory">
      <Select v-model="formValidate.factory" placeholder="品牌">
        <Option value="beijing">工厂一</Option>
        <Option value="shanghai">工厂2</Option>
        <Option value="shenzhen">工厂3</Option>
      </Select>
    </FormItem>
    <FormItem label="录入类型" prop="scale">
      <Select v-model="formValidate.workshop" placeholder="品牌">
        <Option value="beijing">类型一</Option>
        <Option value="shanghai">类型2</Option>
        <Option value="shenzhen">类型3</Option>
      </Select>
    </FormItem>
    <FormItem label="年月" prop="time">
      <DatePicker type="month" v-model="formValidate.time" placeholder="Select month" style="width: 200px" @on-change="selectChange"></DatePicker>
    </FormItem>
    <FormItem label="数量" prop="num">
      <InputNumber v-model="formValidate.num" :min="0" placeholder="数量"></InputNumber>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
      <!-- <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
    </FormItem>
  </Form>
</template>
<script>
export default {
  data: function () {
    const daterange = (rule, value, callback) => {
      console.log(value)
      if (value && value[0] === '') {
        callback(new Error('必选项！'))
      } else {
        callback()
      }
    }
    const num = (rule, value, callback) => {
      console.log(value)
      if (value === '' || value === undefined) {
        callback(new Error('请输入数字！'))
      } else {
        callback()
      }
    }
    return {
      editOneData: {},
      formdataType: 'save',
      formValidate: {
        factory: '',
        scale: '',
        daterange: [],
        num: 0
      },
      testobj: {
        'createTime': 'string',
        'createUser': 'string',
        'etime': 'string',
        'factory': 'string',
        'id': 0,
        'num': 0,
        'scale': 'string',
        'stime': 'string',
        'updTime': 'string',
        'updUser': 'string'
      },
      ruleValidate: {
        factory: [{ required: true, message: '必填项！', trigger: 'blur' }, { required: true, message: '必填项！', trigger: 'change' }, { type: 'string', max: 20, message: '最多20个字！', trigger: 'change' }],
        scale: [{ required: true, message: '必填项！', trigger: 'blur' }, { required: true, message: '必填项！', trigger: 'change' }],
        daterange: [{ validator: daterange, trigger: 'blur' }, { validator: daterange, trigger: 'change' }],
        num: [{ validator: num, trigger: 'blur' }, { validator: num, trigger: 'change' }]
      }
    }
  },
  created: function () {
    // console.log('--created--')
  },
  mounted: function () {
    // console.log('--mounted--')
  },
  destroyed: function () {
    // console.log('--destroyed--')
  },
  methods: {
    handleSubmit: function (name) {
      let self = this
      this.$refs[name].validate((valid) => {
        if (valid) {
          self.submitReady()
        } else {
          this.$Message.error('请按提示填写!')
        }
      })
    },
    handleReset: function (name) {
      this.$refs[name].resetFields()
    },
    // 提交
    submitReady: function () {
      let self = this
      if (self.editOneData.id === undefined) {
        self.save()
      } else {
        self.upd()
      }
    },
    selectChange: function (select) {
      console.log('select', select)
    },
    // 新增
    save: function () {
      let self = this
      let stime = new Date(self.formValidate.daterange[0]).format('yyyy-MM-dd')
      let etime = new Date(self.formValidate.daterange[1]).format('yyyy-MM-dd')
      let postData = {
        createUser: 'admin',
        etime: etime,
        factory: self.formValidate.factory,
        num: self.formValidate.num,
        scale: self.formValidate.scale,
        stime: stime
      }
      window.myapi.quota_save(postData).then(function (res) {
        if (res.status === 200) {
          self.$Message.success('保存成功!')
          self.$emit('modalSuccess')
        } else {
          if (res.msg) {
            self.$Message.error(res.msg)
          }
        }
      }).catch(function (e) {
        self.$Message.error('保存失败!')
      })
    },
    // 修改
    upd: function () {
      let self = this
      let stime = new Date(self.formValidate.daterange[0]).format('yyyy-MM-dd')
      let etime = new Date(self.formValidate.daterange[1]).format('yyyy-MM-dd')
      let postData = {
        id: self.editOneData.id,
        updUser: 'admin',
        etime: etime,
        factory: self.formValidate.factory,
        num: self.formValidate.num,
        scale: self.formValidate.scale,
        stime: stime,
        createUser: self.editOneData.createUser,
        createTime: self.editOneData.createTime
      }
      window.myapi.quota_upd(postData).then(function (res) {
        if (res.data.status === 200) {
          self.$Message.success('保存成功!')
          self.$emit('modalSuccess')
        } else {
          if (res.msg) {
            self.$Message.error(res.msg)
          }
        }
      }).catch(function (e) {
        self.$Message.error('保存失败!')
      })
    },
    // 更新formdata
    updateFormdata: function (data) {
      let self = this
      self.editOneData = data
      if (self.editOneData.id) {
        this.$refs['formValidate'].resetFields()
        self.formValidate = {
          factory: self.editOneData.factory,
          scale: self.editOneData.scale,
          daterange: [self.editOneData.stime, self.editOneData.etime],
          num: self.editOneData.num
        }
      } else {
        /* self.formValidate = {
          factory: '',
          scale: '',
          daterange: [],
          num: 0
        } */
        this.$refs['formValidate'].resetFields()
      }
    }
  }
}

</script>
